<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="专业id" prop="deptId">
        <el-input
          v-model="queryParams.deptId"
          placeholder="请输入专业id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="专业名称" prop="deptName">
        <el-input v-model="queryParams.deptName" placeholder="请输入专业名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="学生姓名" prop="nickName">
        <el-input v-model="queryParams.nickName" placeholder="请输入学生姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="queryParams.email" placeholder="请输入邮箱" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="queryParams.idCard" placeholder="请输入身份证号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="手机号" prop="idCard">
        <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="手机号码" prop="idCard">
        <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="性别" prop="idCard">
        <el-select v-model="queryParams.sex" placeholder="请选择性别">
          <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="学生照片" prop="avatar">
        <el-input
          v-model="queryParams.avatar"
          placeholder="请输入学生照片"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="班级id" prop="classId">
        <el-input
          v-model="queryParams.classId"
          placeholder="请输入班级id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="出生日期" prop="dateOfBirth">
        <el-date-picker clearable v-model="queryParams.dateOfBirth" type="date" value-format="yyyy-MM-dd" placeholder="请选择出生日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="省份" prop="state">
        <el-input v-model="queryParams.state" placeholder="请输入省份" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="queryParams.city" placeholder="请输入城市" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="家庭住址" prop="address">
        <el-input v-model="queryParams.address" placeholder="请输入家庭住址" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="入学日期" prop="dateEnrolled">
        <el-date-picker clearable v-model="queryParams.dateEnrolled" type="date" value-format="yyyy-MM-dd" placeholder="请选择入学日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="毕业日期" prop="dateGraduated">
        <el-date-picker clearable v-model="queryParams.dateGraduated" type="date" value-format="yyyy-MM-dd" placeholder="请选择毕业日期">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="平均绩点" prop="gpa">
        <el-input
          v-model="queryParams.gpa"
          placeholder="请输入平均绩点"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!-- <el-form-item label="毕业所需学分" prop="requireCredits">
        <el-input
          v-model="queryParams.requireCredits"
          placeholder="请输入毕业所需学分"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="毕业所需第二课堂学分" prop="requireSecondCredits">
        <el-input
          v-model="queryParams.requireSecondCredits"
          placeholder="请输入毕业所需第二课堂学分"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="家长姓名" prop="parentName">
        <el-input v-model="queryParams.parentName" placeholder="请输入家长姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="家长电话" prop="parentPhone">
        <el-input v-model="queryParams.parentPhone" placeholder="请输入家长电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="辅导员ID" prop="counsellorId">
        <el-input
          v-model="queryParams.counsellorId"
          placeholder="请输入辅导员ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="辅导员名称" prop="counsellorName">
        <el-input v-model="queryParams.counsellorName" placeholder="请输入辅导员名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="辅导员电话" prop="counsellorPhone">
        <el-input v-model="queryParams.counsellorPhone" placeholder="请输入辅导员电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="学院id" prop="collegeId">
        <el-input
          v-model="queryParams.collegeId"
          placeholder="请输入学院id"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="学院名称" prop="collegeName">
        <el-input
          v-model="queryParams.collegeName"
          placeholder="请输入学院名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['edu:student:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['edu:student:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['edu:student:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['edu:student:export']">导出</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleBatchImport">学生照片导入</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="学生照片" align="center" prop="avatar" width="80">
        <template slot-scope="scope">
          <el-image :src="scope.row.avatar"></el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column label="学生照片" align="center" prop="avatar" /> -->
      <!-- <el-table-column label="学生id" align="center" prop="studentId" /> -->
      <el-table-column label="学号" align="center" prop="studentCode" />
      <!-- <el-table-column label="用户id" align="center" prop="userId" /> -->
      <el-table-column label="学生账号" align="center" prop="userName" />
      <!-- <el-table-column label="专业id" align="center" prop="deptId" /> -->
      <el-table-column label="专业名称" align="center" prop="deptName" />
      <el-table-column label="学生姓名" align="center" prop="nickName" />
      <el-table-column label="邮箱" align="center" prop="email" />
      <el-table-column label="身份证号" align="center" prop="idCard" />
      <el-table-column label="手机号码" align="center" prop="phonenumber" />
      <el-table-column label="性别" align="center" prop="sex" />
      <!-- <el-table-column label="班级id" align="center" prop="classId" /> -->
      <el-table-column label="班级名称" align="center" prop="className" />
      <el-table-column label="出生日期" align="center" prop="dateOfBirth" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dateOfBirth, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="省份" align="center" prop="state" />
      <el-table-column label="城市" align="center" prop="city" />
      <el-table-column label="家庭住址" align="center" prop="address" />
      <el-table-column label="入学日期" align="center" prop="dateEnrolled" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dateEnrolled, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="毕业日期" align="center" prop="dateGraduated" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dateGraduated, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平均绩点" align="center" prop="gpa" />
      <el-table-column label="辅修专业" align="center" prop="minor" />
      <el-table-column label="毕业所需学分" align="center" prop="requireCredits" />
      <el-table-column label="总学分" align="center" prop="totalCredits" />
      <el-table-column label="毕业所需第二课堂学分" align="center" prop="requireSecondCredits" />
      <el-table-column label="第二课堂总学分" align="center" prop="totalSecondCredits" />
      <el-table-column label="家长姓名" align="center" prop="parentName" />
      <el-table-column label="家长联系电话" align="center" prop="parentPhone" />
      <!-- <el-table-column label="辅导员ID" align="center" prop="counsellorId" /> -->
      <el-table-column label="辅导员名称" align="center" prop="counsellorName" />
      <el-table-column label="辅导员电话" align="center" prop="counsellorPhone" />
      <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
      <!-- <el-table-column label="学院id" align="center" prop="collegeId" /> -->
      <!-- <el-table-column label="学院名称" align="center" prop="collegeName" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['edu:student:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['edu:student:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改学生基础信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-form-item label="学生照片" prop="avatar">
          <el-upload class="avatar-uploader" :action="upload.url" :headers="upload.headers" :show-file-list="false" :on-success="handleAvatarSuccess" accept=".jpg,.jpeg,.png" :before-upload="beforeAvatarUpload">
            <img v-if="form.avatar" :src="form.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="专业" prop="deptId">
          <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属专业" @input="deptInput" />
        </el-form-item>
        <el-form-item label="班级id" prop="classId">
          <el-select v-model="form.classId" filterable placeholder="请选择" remote :loading="classLoading" :remote-method="classRemoteMethod" :disabled="form.deptId == null">
            <el-option v-for="item in classList" :key="item.classId" :label="item.name" :value="item.classId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生姓名" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入学生姓名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="用户性别">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="dateOfBirth">
          <el-date-picker clearable v-model="form.dateOfBirth" type="date" value-format="yyyy-MM-dd" placeholder="请选择出生日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="form.city" placeholder="请输入城市" />
        </el-form-item>
        <el-form-item label="省份" prop="state">
          <el-input v-model="form.state" placeholder="请输入省份" />
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
          <el-input v-model="form.address" placeholder="请输入家庭住址" />
        </el-form-item>
        <el-form-item label="入学日期" prop="dateEnrolled">
          <el-date-picker clearable v-model="form.dateEnrolled" type="date" value-format="yyyy-MM-dd" placeholder="请选择入学日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="毕业日期" prop="dateGraduated">
          <el-date-picker clearable v-model="form.dateGraduated" type="date" value-format="yyyy-MM-dd" placeholder="请选择毕业日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="毕业所需学分" prop="requireCredits">
          <el-input v-model="form.requireCredits" placeholder="请输入毕业所需学分" />
        </el-form-item>
        <el-form-item label="毕业所需第二课堂学分" prop="requireSecondCredits">
          <el-input v-model="form.requireSecondCredits" placeholder="请输入毕业所需第二课堂学分" />
        </el-form-item>
        <el-form-item label="家长姓名" prop="parentName">
          <el-input v-model="form.parentName" placeholder="请输入家长姓名" />
        </el-form-item>
        <el-form-item label="家长联系电话" prop="parentPhone">
          <el-input v-model="form.parentPhone" placeholder="请输入家长联系电话" />
        </el-form-item>
        <el-form-item label="辅导员" prop="counsellorId">
          <el-select v-model="form.counsellorId" filterable placeholder="请选择" remote :loading="counsellorLoading" :remote-method="counsellorRemoteMethod">
            <el-option v-for="item in counsellorList" :key="item.userId" :label="item.nickName" :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 导入对话框 -->
    <el-dialog :title="importUpload.title" :visible.sync="importUpload.open" width="400px" append-to-body>
      <el-upload ref="importUpload" :limit="1" accept=".xlsx, .xls" :headers="importUpload.headers" :action="importUpload.url + '?updateSupport=' + importUpload.updateSupport" :disabled="importUpload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!-- <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="importUpload.updateSupport" /> 是否更新已经存在的用户数据
          </div> -->
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 头像导入对话框 -->
    <el-dialog :title="batchUpload.title" :visible.sync="batchUpload.open" width="400px" append-to-body>
      <el-upload ref="batchUpload" :limit="10000" class="upload-demo" accept="image/png,image/jpg,image/jpeg" :headers="batchUpload.headers" :action="batchUpload.url" :disabled="batchUpload.isUploading" :file-list="batchUpload.fileList" multiple :on-change="handleFileChange" :before-remove="handleFileRemove" :on-progress="handleBatchFileUploadProgress" :on-success="handleBatchFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <!-- <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="importUpload.updateSupport" /> 是否更新已经存在的用户数据
          </div> -->
          <span>仅允许导照片，照片名称是学生的学号</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBatchFileForm">确 定</el-button>
        <el-button @click="batchUpload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listStudent, getStudent, delStudent, addStudent, updateStudent } from "@/api/edu/student";
import { listClassByDept } from "@/api/edu/class";
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect, listCounsellor } from "@/api/system/user";
import DictData from '@/components/DictData'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth";
import axios from 'axios'
export default {
  name: "Student",
  //字典
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  components: { Treeselect },
  data () {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 学生基础信息表格数据
      studentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        phonenumber: null,
        sex: null,
        studentCode: null,
        userId: null,
        userName: null,
        deptId: null,
        deptName: null,
        nickName: null,
        email: null,
        idCard: null,
        avatar: null,
        classId: null,
        className: null,
        dateOfBirth: null,
        city: null,
        state: null,
        address: null,
        dateEnrolled: null,
        dateGraduated: null,
        gpa: null,
        minor: null,
        requireCredits: null,
        totalCredits: null,
        requireSecondCredits: null,
        totalSecondCredits: null,
        parentName: null,
        parentPhone: null,
        counsellorId: null,
        counsellorName: null,
        counsellorPhone: null,
        collegeId: null,
        collegeName: null
      },
      // 表单参数
      form: {
        avatar: null,
        deptId: null,
      },
      // 表单校验
      rules: {
        updateTime: [
          { required: true, message: "更新时间不能为空", trigger: "blur" }
        ],
      },
      //部门数选项
      deptOptions: null,

      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
      },
      //班级的加载框
      classLoading: false,
      //班级列表
      classList: null,
      //班级的加载框
      counsellorLoading: false,
      //班级列表
      counsellorList: null,
      // 用户导入参数
      importUpload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/edu/student/importData"
      },
      // 用户头像导入参数
      batchUpload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        fileList: [],
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/edu/student/batch/upload/stu/photo",
      },
    };
  },
  created () {
    // DictData.install()
    this.getList();
  },
  methods: {
    /**
     * 批量导入照片
     */
    handleBatchImport () {
      this.batchUpload.open = true;
    },
    // 提交上传文件
    submitBatchFileForm () {
      // 创建新的数据对象
      let formData = new FormData();
      let fileName = []
      // 将上传的文件放到数据对象中
      this.batchUpload.fileList.forEach(file => {
        formData.append('file', file.raw);
        fileName.push(file.name);
      });
      // 文件名
      formData.append('fileName', fileName);
      console.log(formData)
      this.uploadFile(formData).then(res => {
        console.log("********33333****************")
        console.log(res)
        this.handleBatchFileSuccess(res, null, null)
        this.$message.success('图片上传成功！')
      }).catch(res => {
        this.$message.error('图片上传失败！')
      })
    },
    handleBatchFileUploadProgress (event, file, fileList) {
      this.batchUpload.isUploading = true;
    },
    handleBatchFileSuccess (response, file, fileList) {
      this.batchUpload.open = false;
      console.log(response)
      this.$refs.batchUpload.clearFiles();
      const blob = new Blob([response.data])
      console.log(blob)
      this.$download.saveAs(blob, "导入照片结果.xlsx")
      this.batchUpload.isUploading = false;
      this.getList();
    },
    // 上传发生变化钩子
    handleFileChange (file, fileList) {
      this.batchUpload.fileList = fileList;
    },
    // 删除之前钩子
    handleFileRemove (file, fileList) {
      this.batchUpload.fileList = fileList;
    },
    // 批量上传
    httpRequest (file) {
      console.log("=======3333=================")
      console.log(this.batchUpload.fileList)
      // 创建新的数据对象
      let formData = new FormData();
      let fileName = []
      // 将上传的文件放到数据对象中
      this.batchUpload.fileList.forEach(file => {
        formData.append('file', file.raw);
        fileName.push(file.name);
      });
      // 文件名
      formData.append('fileName', fileName);

      this.uploadFile(formData).then(res => {
        console.log("********33333****************")
        console.log(res)
        this.$message.success('图片上传成功！')
      }).catch(res => {
        this.$message.success('图片上传失败！')
      })
    },
    // 封装的上传请求
    uploadFile (params) {
      return axios.post(this.batchUpload.url, params,
        { headers: { 'Content-Type': 'multipart/form-data', "Authorization": "Bearer " + getToken() }, responseType: 'blob' })
    },
    // handleBatchPreview (file, fileList) {
    //   if (file.raw.size > 1024 * 1024 * 2) {
    //     that.$message.error('上传文件大小不能超过 2MB!');
    //     return;
    //   }
    // },

    fileExceed: function (files, fileList) {
      this.$message.warning(`当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    /**
     * 导入
     */
    // 提交上传文件
    submitFileForm () {
      this.$refs.importUpload.submit();
    },
    /** 下载模板操作 */
    importTemplate () {
      this.download('edu/student/importTemplate', {
      }, `edu_student_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress (event, file, fileList) {
      this.importUpload.isUploading = true;
    },
    handleFileSuccess (response, file, fileList) {
      this.importUpload.open = false;
      this.importUpload.isUploading = false;
      this.$refs.importUpload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    handleImport () {
      this.importUpload.open = true;
    },
    //远程获取班级
    classRemoteMethod (query) {
      if (!this.form.deptId || typeof this.form.deptId == 'undefined') {
        return;
      }
      this.classLoading = true
      listClassByDept(this.form.deptId, query).then(res => {
        console.log(res)
        this.classList = res.data
        this.classLoading = false
      }).catch(err => {
        console.log(err)
        this.$modal.msgError(err.message);
      })
    },
    deptInput () {
      this.classRemoteMethod(null)
    },
    //远程获取辅导员
    counsellorRemoteMethod (query) {
      this.counsellorLoading = true
      listCounsellor(query).then(res => {
        console.log(res)
        this.counsellorList = res.data
        this.counsellorLoading = false
      }).catch(err => {
        console.log(err)
        this.$modal.msgError(err.message);
      })
    },

    handleAvatarSuccess (res, file) {
      this.form.avatar = res.data.url;

    },
    beforeAvatarUpload (file) {
      let types = ['image/jpeg', 'image/jpg', 'image/png'];
      const isImage = types.includes(file.type);
      const isLtSize = file.size / 1024 / 1024 < 5;
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
        return false;
      }
      if (!isLtSize) {
        this.$message.error('上传图片大小不能超过 5MB!');
        return false;
      }
      return true;
    },
    /** 查询学生基础信息列表 */
    getList () {
      this.loading = true;
      listStudent(this.queryParams).then(response => {
        this.studentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree () {
      if (!this.deptOptions) {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data;
          //查询所有的学生
          // classRemoteMethod(null)
        });
      }

    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        studentId: null,
        studentCode: null,
        userId: null,
        userName: null,
        deptId: null,
        deptName: null,
        nickName: null,
        email: null,
        idCard: null,
        avatar: null,
        classId: null,
        className: null,
        dateOfBirth: null,
        city: null,
        state: null,
        address: null,
        dateEnrolled: null,
        dateGraduated: null,
        gpa: null,
        minor: null,
        requireCredits: null,
        totalCredits: null,
        requireSecondCredits: null,
        totalSecondCredits: null,
        parentName: null,
        parentPhone: null,
        counsellorId: null,
        counsellorName: null,
        counsellorPhone: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        remark: null,
        collegeId: null,
        collegeName: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.studentId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset();
      this.open = true;
      this.title = "添加学生基础信息";
      //请求部门树
      this.getDeptTree();
      //请求辅导员列表
      this.counsellorRemoteMethod("")

    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset();

      const studentId = row.studentId || this.ids
      getStudent(studentId).then(response => {
        this.form = response.data;
        this.form.deptId = response.data.deptId
        this.open = true;
        this.title = "修改学生基础信息";
        //请求班级
        console.log("请求修改数据的时候请求的")
        this.classRemoteMethod(null)
        //请求部门树
        this.getDeptTree();
        //请求辅导员列表
        this.counsellorRemoteMethod("")
      });


    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let classId = this.form.classId
          this.form.className = this.classList.filter(clazz => clazz.classId === classId)[0].name
          let counsellorId = this.form.counsellorId
          let counsellorObj = this.counsellorList.filter(counsellor => counsellor.userId === counsellorId)[0]
          this.form.counsellorName = counsellorObj.nickName
          this.form.counsellorPhone = counsellorObj.phonenumber
          if (this.form.studentId != null) {
            updateStudent(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addStudent(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const studentIds = row.studentId || this.ids;
      this.$modal.confirm('是否确认删除学生基础信息编号为"' + studentIds + '"的数据项？').then(function () {
        return delStudent(studentIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download('edu/student/export', {
        ...this.queryParams
      }, `student_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>